<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue 3.2 Released! | The Vue Point</title>
    <meta name="description" content="The offical blog for the Vue.js project">
    <link rel="stylesheet" href="static/css/style.b58d2c90.css">
    <link rel="modulepreload" href="https://blog.vuejs.org/assets/app.9f8b31e8.js">
    <link rel="modulepreload" href="https://blog.vuejs.org/assets/posts_vue-3.2.md.b25d09af.lean.js">
    
    <meta name="twitter:site" content="@vuejs">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:image" content="https://vuejs.org/images/logo.png">
  <link rel="icon" type="image/x-icon" href="https://blog.vuejs.org/favicon.ico">
  <script src="static/js/script.js" data-site="NYHGSGQV" data-spa="auto" defer=""></script>
  <meta name="twitter:title" content="Vue 3.2 Released! | The Vue Point">
  <meta property="og:title" content="Vue 3.2 Released! | The Vue Point">
  </head>
  <body>
    <div id="app"><div class="antialiased"><div class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0"><nav class="flex justify-between items-center py-10 font-bold"><a class="text-xl" href="index10.html" aria-label="The Vue Point"><img class="inline-block mr-2" style="width:36px;height:31px;" alt="logo" src="static/picture/logo1.svg"><span class="hidden md:inline">The Vue Point</span></a><div class="text-sm text-gray-500 leading-5"><a class="hover:text-gray-700" href="javascript:;" target="_blank" rel="noopener"><span class="hidden sm:inline">GitHub </span>Source</a><span class="mr-2 ml-2">·</span><a class="hover:text-gray-700" href="javascript:;">RSS<span class="hidden sm:inline"> Feed</span></a><span class="mr-2 ml-2">·</span><a class="hover:text-gray-700" href="index12.html" target="_blank" rel="noopener">Vuejs.org →</a></div></nav></div><main class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0"><article class="xl:divide-y xl:divide-gray-200"><header class="pt-6 xl:pb-10 space-y-1 text-center"><dl><dt class="sr-only">Published on</dt><dd class="text-base leading-6 font-medium text-gray-500"><time datetime="2021-08-05T12:00:00.000Z">August 5, 2021</time></dd></dl><h1 class="text-3xl leading-9 font-extrabold text-gray-900 tracking-tight sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">Vue 3.2 Released!</h1></header><div class="divide-y xl:divide-y-0 divide-gray-200 xl:grid xl:grid-cols-4 xl:gap-x-10 pb-16 xl:pb-20" style="grid-template-rows:auto 1fr;"><dl class="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200"><dt class="sr-only">Authors</dt><dd><ul class="flex justify-center xl:block space-x-8 sm:space-x-12 xl:space-x-0 xl:space-y-8"><li class="flex items-center space-x-2"><img src="https://gravatar.com/avatar/eca93da2c67aadafe35d477aa8f454b8" alt="author image" class="w-10 h-10 rounded-full"><dl class="text-sm font-medium leading-5 whitespace-nowrap"><dt class="sr-only">Name</dt><dd class="text-gray-900">Evan You</dd><dt class="sr-only">Twitter</dt><dd><a href="javascript:;" target="_blank" rel="noopnener noreferrer" class="link">@youyuxi</a></dd></dl></li></ul></dd></dl><div class="divide-y divide-gray-200 xl:pb-0 xl:col-span-3 xl:row-span-2"><div style="position:relative;" class="prose max-w-none pt-10 pb-8"><div><p>We are excited to announce the release of Vue.js 3.2 &quot;Quintessential Quintuplets&quot;! This release includes many significant new features and performance improvements, and contains no breaking changes.</p><hr><h2 id="new-sfc-features" tabindex="-1">New SFC Features <a class="header-anchor" href="#new-sfc-features" aria-hidden="true">#</a></h2><p>Two new features for Single File Components (SFCs, aka <code>.vue</code> files) have graduated from experimental status and are now considered stable:</p><ul><li><p><code>&lt;script setup&gt;</code> is a compile-time syntactic sugar that greatly improves the ergonomics when using Composition API inside SFCs.</p></li><li><p><code>&lt;style&gt; v-bind</code> enables component state-driven dynamic CSS values in SFC <code>&lt;style&gt;</code> tags.</p></li></ul><p>Here is an example component using these two new features together:</p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span>

<span class="token keyword">const</span> color <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;red&#39;</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>color = color === <span class="token punctuation">&#39;</span>red<span class="token punctuation">&#39;</span> ? <span class="token punctuation">&#39;</span>green<span class="token punctuation">&#39;</span> : <span class="token punctuation">&#39;</span>red<span class="token punctuation">&#39;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    Color is: {{ color }}
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">button</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">v-bind</span><span class="token punctuation">(</span>color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>Try it out in the <a href="javascript:;" target="_blank" rel="noopener noreferrer">SFC Playground</a>, or read their respective documentations:</p><ul><li><a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>&lt;script setup&gt;</code></a></li><li><a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>&lt;style&gt; v-bind</code></a></li></ul><p>Building on top of <code>&lt;script setup&gt;</code>, we also have a new RFC for improving the ergonomics of ref usage with compiler-enabled sugar - please share your feedback <a href="javascript:;" target="_blank" rel="noopener noreferrer">here</a>.</p><h2 id="web-components" tabindex="-1">Web Components <a class="header-anchor" href="#web-components" aria-hidden="true">#</a></h2><p>Vue 3.2 introduces a new <code>defineCustomElement</code> method for easily creating native <a href="javascript:;" target="_blank" rel="noopener noreferrer">custom elements</a> using Vue component APIs:</p><div class="language-js"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineCustomElement <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span>

<span class="token keyword">const</span> MyVueElement <span class="token operator">=</span> <span class="token function">defineCustomElement</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// normal Vue component options here</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// Register the custom element.</span>
<span class="token comment">// After registration, all `&lt;my-vue-element&gt;` tags</span>
<span class="token comment">// on the page will be upgraded.</span>
customElements<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">&#39;my-vue-element&#39;</span><span class="token punctuation">,</span> MyVueElement<span class="token punctuation">)</span>
</code></pre></div><p>This API allows developers to create Vue-powered UI component libraries that can be used with any framework, or no framework at all. We have also added a new section in our docs on <a href="javascript:;" target="_blank" rel="noopener noreferrer">consuming and creating Web Components in Vue</a>.</p><h2 id="performance-improvements" tabindex="-1">Performance Improvements <a class="header-anchor" href="#performance-improvements" aria-hidden="true">#</a></h2><p>3.2 includes some significant performance improvements to Vue&#39;s reactivity system, thanks to the great work by <a href="javascript:;" target="_blank" rel="noopener noreferrer">@basvanmeurs</a>. Specifically:</p><ul><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">More efficient ref implementation (~260% faster read / ~50% faster write)</a></li><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">~40% faster dependency tracking</a></li><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">~17% less memory usage</a></li></ul><p>The template compiler also received a number of improvements:</p><ul><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">~200% faster creation of plain element VNodes</a></li><li>More aggressive constant hoisting [<a href="javascript:;" target="_blank" rel="noopener noreferrer">1</a>] [<a href="javascript:;" target="_blank" rel="noopener noreferrer">2</a>]</li></ul><p>Finally, there is a new <a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>v-memo</code> directive</a> that provides the ability to memoize part of the template tree. A <code>v-memo</code> hit allows Vue to skip not only the Virtual DOM diffing, but the creation of new VNodes altogether. Although rarely needed, it provides an escape hatch to squeeze out maximum performance in certain scenarios, for example large <code>v-for</code> lists.</p><p>The usage of <code>v-memo</code>, which is a one-line addition, places Vue among the fastest mainstream frameworks in <a href="javascript:;" target="_blank" rel="noopener noreferrer">js-framework-benchmark</a>:</p><p><img src="static/picture/bench.png" alt="benchmark"></p><h2 id="server-side-rendering" tabindex="-1">Server-side Rendering <a class="header-anchor" href="#server-side-rendering" aria-hidden="true">#</a></h2><p>The <code>@vue/server-renderer</code> package in 3.2 now ships an ES module build which is also decoupled from Node.js built-ins. This makes it possible to bundle and leverage <code>@vue/server-renderer</code> for use inside non-Node.js runtimes such as <a href="javascript:;" target="_blank" rel="noopener noreferrer">CloudFlare Workers</a> or Service Workers.</p><p>We also improved the streaming render APIs, with new methods for rendering to the <a href="javascript:;" target="_blank" rel="noopener noreferrer">Web Streams API</a>. Check out the <a href="javascript:;" target="_blank" rel="noopener noreferrer">documentation of <code>@vue/server-renderer</code></a> for more details.</p><h2 id="effect-scope-api" tabindex="-1">Effect Scope API <a class="header-anchor" href="#effect-scope-api" aria-hidden="true">#</a></h2><p>3.2 introduces a new <a href="javascript:;" target="_blank" rel="noopener noreferrer">Effect Scope API</a> for directly controlling the disposal timing of reactive effects (computed and watchers). It makes it easier to leverage Vue&#39;s reactivity API out of a component context, and also unlocks some advanced use cases inside components.</p><p>This is low-level API largely intended for library authors, so it&#39;s recommended to read the feature&#39;s <a href="javascript:;" target="_blank" rel="noopener noreferrer">RFC</a> for the motivation and use cases of this feature.</p><hr><p>For a detailed list of all changes in 3.2, please refer to the <a href="javascript:;" target="_blank" rel="noopener noreferrer">full changelog</a>.</p></div></div></div><footer class="text-sm font-medium leading-5 divide-y divide-gray-200 xl:col-start-1 xl:row-start-2"><div class="py-8"><h2 class="text-xs tracking-wide uppercase text-gray-500"> Next Article </h2><div class="link"><a href="vue-3-as-the-new-default.html">Vue 3 as the New Default</a></div></div><div class="py-8"><h2 class="text-xs tracking-wide uppercase text-gray-500"> Previous Article </h2><div class="link"><a href="hello-2021.html">Reflections for 2020-2021</a></div></div><div class="pt-8"><a class="link" href="index10.html">← Back to the blog</a></div></footer></div></article></main></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"b0a39757\",\"posts_hello-2021.md\":\"28bcda93\",\"posts_vue-3-as-the-new-default.md\":\"48a17eee\",\"posts_vue-3-one-piece.md\":\"156ba32d\",\"posts_vue-3.2.md\":\"b25d09af\"}")</script>
    <script type="module" async="" src="static/js/app.9f8b31e8.js"></script>
    
  </body>
</html>